<template>
	<view id="exchange" class="digital-page">
		<view class="top-banner">
			<image src="../../static/Dp/Logo_487x93.png" mode="widthFix"></image>
		</view>
		<view class="banner">
			<view class="title-area">
				<div class="title-cn">两岸交流</div>
				<div class="title-en">Cross-strait exchanges</div>
			</view>
		</view>
		
		<view class="main-content">
			<template v-for="(v, k) in data" :key="k" >
				<navigator class="news-block" :url="`/pages/Community/NewsDetail?uniqueCode=${v.UniqueCode}`">
					<image :src="domain + v.FeaturedImage" mode="aspectFill"></image>
					<view class="title-area">
						<view class="text-area">{{ v.Topic }}</view>
					</view>
				</navigator>
			</template>
		</view>
	</view>
</template>

<script setup>
	// 黄昕焕 @ 2023年4月19日 页面
	// 黄昕焕 @ 2023年5月5日 绑定(缺少数据)
	// 姚珅 @ 5月21日 返回组件添加，页面修改以及部分绑定 (缺少预约馆的数据)
	// 黄玺 @ 9月9日 重新修改逻辑
	import { onLoad } from '@dcloudio/uni-app'
	import backBtn from './back.vue'
	import { ref } from 'vue'
	import parseHtmlData from './parseHtmlData.js'
	import { domain } from '../../stores/useApp.js'
	import setShare from '../../share.js'
	setShare({
		title: '两岸交流 - 云上埔坪',
		path: "/pages/DigitalPlatform/exchange"
	});
	let uniqueCode = "7R6wzhf2Ev7aRmPBx4VtQv";
	let data = ref([]);
	
	uni.post("/api/categorySource", {
		uniqueCode,
		hasContent: false,
		pageSize: 10
	}).then(msg => {
		for (let d of msg.data) {
			let { nodes, imgs } = parseHtmlData(d.Content);
			d.nodes = nodes;
			d.imgs = imgs;
			data.value.push(d);
		}
	});
	
	function richTextClick (imgs) {
		if (imgs.length) {
			wx.previewImage({
				current: imgs[0], // 当前显示图片的http链接
				urls: imgs
			})
		}
	}
</script>

<style lang="less">
	@import url(shared.less);	
	@title-size: 30rpx;
	@tab-title-size: 23rpx;
	@content-size: 25rpx;

	#exchange {
		.banner {
			.show-bg("https://www.lin-home.com/static/DigitalPlatform/08两岸交流/banner.jpg")
		}
		.title-area{
			width: calc(32rpx * 22);
		}
			
		.news-block {
			background-color: #EFEAE5;
			border-radius: 10px;
			box-shadow: 5px 6px 8px #c7c7c7;
			margin: 0rpx 20rpx 50rpx 20rpx;
			position: relative;
			height: 500rpx;
			& > image {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				border-radius: 10px;
			}
			
			.title-area {
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
				right: 0;
				background-color: #EFEAE5;
				border-radius: 0 0 10px 10px;
				margin-bottom: 0rpx;
				padding: 20rpx 60rpx;
				font-size: 16px;
				box-sizing: border-box;
				font-weight: bold;
				.text-area {
					line-height: 1.5;
					color: @text-color;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
		}
	}
</style>